<template>
  <div class="homepage">
    <div class="header">
    <van-row>
      <van-col span=12 class="icons">
        <svg @click="goback" width="10.000000" height="16.000000" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path id="Vector" d="M3.63574 8L10 14.2227L8.18213 16L0 8L8.18213 0L10 1.77734L3.63574 8Z" fill-rule="evenodd" fill="#06070D"/>
      </svg>
      </van-col>
      <van-col span=12 class="icons rig">
        <svg v-if="orcollect" @click="collect" width="20" height="20" viewBox="0 0 14 20.6436" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <path id="Vector" d="M1 0L13 0C13.2651 0 13.5195 0.105469 13.707 0.292969C13.8945 0.480469 14 0.734863 14 1L14 20.1431C14 20.2324 13.9761 20.3203 13.9307 20.3975C13.8857 20.4741 13.8203 20.5376 13.7422 20.5811C13.6641 20.6245 13.5757 20.646 13.4863 20.6436C13.397 20.6411 13.3096 20.6147 13.2339 20.5669L7 16.0298L0.766113 20.5659C0.69043 20.6133 0.603516 20.6401 0.51416 20.6426C0.424805 20.645 0.336426 20.6235 0.258301 20.5806C0.180176 20.5371 0.114746 20.4736 0.0693359 20.397C0.0239258 20.3198 0 20.2324 0 20.1431L0 1C0 0.734863 0.105469 0.480469 0.292969 0.292969C0.480469 0.105469 0.734863 0 1 0ZM12 2L2 2L2 17.4321L7 13.6709L12 17.4321L12 2Z" fill-rule="evenodd" fill="#000000"/>
        </svg>
        <svg v-else t="1702456898641" @click="yjcollect" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5917" width="20" height="20"><path d="M224 992 544 704 864 992 864 95.744C864 60.736 835.488 32 800.288 32L287.712 32C252.736 32 224 60.544 224 95.744L224 992Z" p-id="5918"></path></svg>
        <svg width="4.000000" height="18.000000" viewBox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <path id="Vector" d="M2 0C0.899902 0 0 0.899902 0 2C0 3.1001 0.899902 4 2 4C3.1001 4 4 3.1001 4 2C4 0.899902 3.1001 0 2 0ZM2 14C0.899902 14 0 14.8999 0 16C0 17.1001 0.899902 18 2 18C3.1001 18 4 17.1001 4 16C4 14.8999 3.1001 14 2 14ZM2 7C0.899902 7 0 7.8999 0 9C0 10.1001 0.899902 11 2 11C3.1001 11 4 10.1001 4 9C4 7.8999 3.1001 7 2 7Z" fill-rule="evenodd" fill="#000000"/>
        </svg>
      </van-col>
    </van-row>
    </div>
    <div class="bookView">
      <img :src="detailObj.img" />
      <h4>{{detailObj.title}}</h4>
      <div class="rate">
        <van-rate
            v-model="value"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
        />
      </div>
      <p :class="[pshow ? 'allintro' : 'intro']">
        {{detailObj.arttext}}
      </p>
    </div>
    <div class="fotbtn">
      <van-row :gutter='20'>
        <van-col span=12 @click="showMore">
          <div class="infobtn">
            <svg width="18.000000" height="13.000000" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <path id="Vector" d="M0 0L6.75 0L6.75 2.2002L0 2.2002L0 0ZM18 5.3999L18 7.6001L0 7.6001L0 5.3999L18 5.3999ZM18 13L18 10.7998L0 10.7998L0 13L18 13Z" fill-rule="evenodd" fill="#000000"/>
            </svg>
            显示更多
          </div>
        </van-col>
        <van-col span=12>
          <div class="infobtn">
            <svg width="20.000000" height="18.000000" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <path id="Vector" d="M0 5.99414C-0.000488281 5.20605 0.154297 4.42627 0.455566 3.69824C0.757324 2.97021 1.19922 2.30908 1.75635 1.75244C2.31396 1.19531 2.97559 0.754395 3.70361 0.453613C4.43213 0.152832 5.2124 -0.00146484 6 0L14 0C17.313 0 20 2.69482 20 5.99414L20 18L6 18C2.68701 18 0 15.3052 0 12.0059L0 5.99414ZM18 16L18 5.99414C17.9976 4.93457 17.5747 3.91943 16.8252 3.17041C16.0752 2.42188 15.0596 2.00098 14 2L6 2C5.47461 1.99854 4.95459 2.10107 4.46924 2.30127C3.9834 2.50146 3.54248 2.79541 3.1709 3.1665C2.79932 3.5376 2.50439 3.97852 2.30371 4.46338C2.10254 4.94873 1.99951 5.46875 2 5.99414L2 12.0059C2.00244 13.0654 2.42529 14.0806 3.1748 14.8296C3.9248 15.5781 4.94043 15.999 6 16L18 16ZM12 8L14 8L14 10L12 10L12 8ZM6 8L8 8L8 10L6 10L6 8Z" fill-rule="evenodd" fill="#000000"/>
            </svg>
            评分
          </div>
        </van-col>
      </van-row>
    </div>
    <div class="buybtn" @click="borrow">
      可借阅
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getDetailbook, collectbook, isCollect, borrowBook } from '@/api/api.js'
export default {
  name: 'Home',
  data () {
    return {
      pshow: false,
      searchid: 0,
      detailObj: {},
      value: 5,
      orcollect: true
    }
  },
  methods: {
    async borrow () {
      const obj = {
        borrow_id: this.detailObj.id,
        borrow_name: this.detailObj.title,
        borrow_img: this.detailObj.img
      }
      await borrowBook(obj).then((res) => {
        if (res.code === 201) {
          Toast.success('借阅成功')
        } else {
          Toast.fail(res.data.error)
        }
      })
    },
    getDetail (id) {
      getDetailbook(id).then((res) => {
        if (res.code === 200) {
          this.detailObj = res.data
        }
      })
    },
    goback () {
      this.$router.push('/main')
    },
    showMore () {
      this.pshow = true
    },
    yjcollect () {
      Toast.fail('已被收藏')
    },
    collect () {
      const obj = {
        collect_id: this.detailObj.id,
        collect_name: this.detailObj.title,
        collect_img: this.detailObj.img
      }
      collectbook(obj).then((res) => {
        console.log(res, 'res')
        if (res.code === 201) {
          Toast.success('收藏成功')
          this.getIsCollect(this.searchid)
        } else {
          console.log('收藏失败')
          // Toast({
          //   message: res.data.detail,
          //   icon: 'like-o'
          // })
        }
      })
    },
    getIsCollect (id) {
      if (this.$store.state.token) {
        isCollect(id).then((res) => {
          if (res.code === 200) {
            this.orcollect = false
          } else {
            this.orcollect = true
          }
        })
      }
    }
  },
  mounted () {
    this.searchid = this.$route.query.id
    this.getDetail(this.searchid)
    this.getIsCollect(this.searchid)
    console.log(this.$store.state)
  }
}
</script>
<style lang="less" scoped>
.homepage{
  padding: 0px 30px;
  width: calc(100% - 60px);
  background: #fdfdfd;
  height: calc(100% - 100px);
  overflow: auto;
}
.header{
  height: 60px;
  .icons{
    height: 60px;
    display: flex;
    // justify-content: center;
    align-items: flex-end;
  }
  .rig{
    justify-content: flex-end;
    svg{
      margin: 0px 20px;
    }
  }
}
.bookView{
  text-align: center;
  margin: 20px 0px;
  img {
    margin-bottom: 20px;
    width: 211px;
    height: 310px;
    box-shadow: -1px 16px 9px 5px #eee;
  }
  h4{
      margin-bottom: 20px;
  }
  .rate{
    display: block;
    margin-bottom: 20px;
  }
  .intro{
    text-indent: 40px;
    color: #a4a5a7;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .allintro{
    text-indent: 40px;
    color: #a4a5a7;
  }
}
.fotbtn {
  margin-bottom: 10px;
  height: 40px;
  .infobtn{
    height: 40px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0px 0px 6px 0px #eeeeee;
    svg {
      margin: 0px 10px;
    }
  }
}
.buybtn{
  text-align: center;
  color: white;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%,0px);
  width: 90%;
  border-radius: 10px;
  background: #06070d;
}
</style>
